<template>
  <div class="user-page animate__animated animate__zoomIn">
    <!-- 用户资料区域 -->
    <div class="user">
      <!-- 头像 -->
      <div class="avatar-wrapper animate__animated animate__pulse">
        <img :src="userStore.user.avatar" class="user-image" style="border: 1px solid rgba(0, 0, 0, 0.08)" />
      </div>
      <!-- 用户信息 -->
      <div class="info-part">
        <div class="user-name">{{ userStore.user.nickName }}</div>
        <div class="user-phone">
          <el-tag type="danger" effect="light" round style="margin-right: 5px;">淘淘号:</el-tag>
          {{ userStore.user.phone }}
        </div>
        <div class="user-IP">
          <el-tag type="success" effect="light" round style="margin-right: 5px;">IP属地:</el-tag>
          {{ userStore.user.province }} {{ userStore.user.city }}
        </div>
        <div class="user-desc">
          <span v-if="userStore.user.intro !== ''">{{ userStore.user.intro }}</span>
          <span v-else>这家伙很神秘，没有写个人简介。</span>
        </div>

        <div class="data-info">
          <div class="shows">发布 {{ userOrderData?.published }}</div>
          <div class="shows">卖出 {{ userOrderData?.sold }}</div>
          <div class="shows">买入 {{ userOrderData?.purchased }}</div>
          <div class="shows">收藏 {{ userOrderData?.collected }}</div>
        </div>
        <!---->
      </div>
    </div>
    <div class="reds-sticky-box">
      <div class="reds-sticky">
        <div :class="['reds-tab-item', route.path.endsWith('published') ? 'active-item' : '']"
          @click="handleMenuClick('published')">
          <span>发布</span>
        </div>
        <div :class="['reds-tab-item', route.path.endsWith('sold') ? 'active-item' : '']"
          @click="handleMenuClick('sold')">
          <span>卖出</span>
        </div>
        <div :class="['reds-tab-item', route.path.endsWith('purchased') ? 'active-item' : '']"
          @click="handleMenuClick('purchased')">
          <span>买到</span>
        </div>
        <div :class="['reds-tab-item', route.path.endsWith('collected') ? 'active-item' : '']"
          @click="handleMenuClick('collected')">
          <span>收藏</span>
        </div>
      </div>
    </div>
    <el-divider />
    <!-- 商品展示区域 -->
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores'
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 当前选中的菜单
const selectedMenu = ref<string>('')

// 菜单点击事件处理函数
const handleMenuClick = (path: string) => {
  router.replace(`/home/Mine/${path}`)
  // 重新获取用户订单数据
  getUserOrderData()
}

// 在组件挂载时设置初始值
onMounted(() => {
  selectedMenu.value = route.path.split('/').pop() || 'published'
  // 获取用户的发布、卖出、买到、收藏数据
  getUserOrderData()
}

)

// 获取“我的”界面用户的商品列表
import useMineProduct from '@/hooks/useMineProduct'
const { userOrderData, getUserOrderData } = useMineProduct()
</script>

<style lang="less" scoped>
.user-page {
  width: 100%;
  padding: 24px;

  .user {
    display: flex;
    align-items: center;
    justify-content: center;

    .avatar-wrapper {
      height: 175px;
      margin-right: 48px;

      .user-image {
        border-radius: 50%;
        height: 100%;
        object-fit: cover;
      }
    }

    .info-part {
      height: 175px;
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .user-name {
        color: var(--font-color);
        font-weight: 700;
        font-size: 24px;
        line-height: 24px;
        margin-bottom: 10px;
      }

      .user-phone {
        color: var(--dark-font-color);
        display: flex;
        align-items: center;
        font-size: 14px;
        margin-bottom: 10px;
        height: 20px;
        line-height: 20px;
      }

      .user-IP {
        color: var(--dark-font-color);
        display: flex;
        align-items: center;
        font-size: 14px;
        height: 20px;
        line-height: 20px;
        margin-bottom: 10px;
      }

      .user-desc {
        color: var(--dark-font-color);
        font-size: 14px;
        margin-bottom: 10px;
      }

      .data-info {
        display: flex;
        align-items: center;
        justify-content: flex-start;

        .shows {
          height: 20px;
          line-height: 20px;
          color: var(--dark-font-color);
          margin-right: 10px;
          font-size: 14px;
        }
      }
    }

  }

  .reds-sticky-box {
    display: flex;
    justify-content: center;
    margin-top: 24px;

    .reds-sticky {
      display: flex;
      width: 30%;

      .reds-tab-item {
        height: 40px;
        line-height: 40px;
        color: var(--font-color);
        padding: 0 20px;
        border-radius: 20px;
        cursor: pointer;
      }

      .active-item {
        background-color: var(--dark-background-color);
        font-weight: 600;
      }
    }
  }
}
</style>
